<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="$router.back()"
      fixed
    />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image
            round
            class="avatar"
            :src="profileObj.photo"
            @click="updatePhoto"
          />
          <!-- accept="image/*"   允许接收到的类型是image格式 -->
          <input
            type="file"
            ref="iptFile"
            v-show="false"
            accept="image/*"
            @change="onFileChange"
          />
        </template>
      </van-cell>
      <van-cell
        title="名称"
        is-link
        :value="profileObj.name"
        @click="editUaerName"
      />
      <van-cell
        title="生日"
        is-link
        :value="profileObj.birthday"
        @click="birthFn"
      />
    </van-cell-group>
    <!-- 组件调用修改姓名 -->
    <van-dialog
      v-model="show"
      title="输入新的用户名"
      show-cancel-button
      :before-close="updateUserNameFn"
    >
      <input
        type="text"
        v-model="userName"
        placeholder="输入新的用户名"
        v-fofo
      />
    </van-dialog>
    <!-- 选择年月日 -->
    <van-popup
      v-model="popShow"
      round
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="popShow = false"
        @confirm="confirmFn"
      />
    </van-popup>
  </div>
</template>

<script>
import { getUserProfileApi, userPhotoApi, updateUserProfileApi } from '@/api'
import { Notify } from 'vant' // 引入提示组件
import moment from 'moment'// 引入moment插件
import { mapMutations } from 'vuex'
export default {
  name: 'UserEdit',
  data () {
    return {
      profileObj: {}, // 用户信息对象
      show: false, // 控制编辑用户名的显示与否
      userName: '', // 用户名
      minDate: new Date(1950, 0, 1), // 生日选择那块的
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17), // 当前时间，这个会控制弹出框显示的日期，这是啥，弹出后默认显示的就是傻
      popShow: false// 生日选择框的弹出与否
    }
  },
  methods: {
    ...mapMutations(['updatePhoto', 'updateName']),
    //   点击头像
    updatePhoto () {
      this.$refs.iptFile.click()
    },
    //   input框的图片
    async onFileChange (e) {
      console.log(e.target.files)
      const fd = new FormData() // 后台接口要求传入的参数是一个表单对象
      fd.append('photo', e.target.files[0])
      const res = await userPhotoApi(fd)
      console.log(res)
      // 记得把更新好的图片重新赋值给profileObj里的photo属性
      this.profileObj.photo = res.data.data.photo
      this.updatePhoto(res.data.data.photo)
    },
    // 更新用户名
    // 点击编辑的函数
    editUaerName () {
      this.show = true
      this.userName = this.profileObj.name
    },
    // 弹出框的事件
    async updateUserNameFn (action, done) {
      console.log(action)
      if (action === 'confirm') {
        //    做正则判断，合法就发送请求
        if (/^[a-zA-Z0-9]{1,17}$/.test(this.userName)) {
          console.log(1)
          //   发送请求更新用户名数据
          await updateUserProfileApi({ userName: this.userName })
          // 更新页面显示的名字
          this.profileObj.name = this.userName
          this.updateName(this.userName)
          done()
        } else {
          Notify({ type: 'warning', message: '别瞎输' })
          done(false)
        }
      } else {
        done()
      }
    },
    // 点击生日单元格的函数
    birthFn () {
      this.popShow = true
      this.currentDate = new Date(this.profileObj.birthday)
    },
    // 确定修改生日
    async confirmFn () {
      // 把格式改为年-月-日的形式后台要日期字符串所以用moment，也可以自己拼
      const birth = moment(this.currentDate).format('YYYY-MM-DD')
      console.log(birth)
      // 下面的是注释
      //   const a = moment(this.currentDate).format('MMM Do YY')
      //   const c = moment().format('MMM Do YY')
      //   console.log(a)
      //   console.log(c)
      await updateUserProfileApi({ birthday: birth })
      this.profileObj.birthday = birth
      this.popShow = false
    }
  },
  async created () {
    const res = await getUserProfileApi()
    console.log(res)
    this.profileObj = res.data.data
  }
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
/deep/.van-dialog {
  .van-dialog__content {
    text-align: center;
    input {
      border: none;
      text-align: center;
    }
  }
}
</style>
